<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>骡窝窝-旅游攻略</title>
    <link rel="stylesheet" href="/js/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/navbar.css">
    <link rel="stylesheet" type="text/css" href="/css/font/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="/css/ending.css"/>
    <link rel="stylesheet" type="text/css" href="/css/page.css"/>
    <link rel="stylesheet" type="text/css" href="/css/place.css">
    <script src="/js/jquery.js" type="text/javascript"></script>
    <script src="/js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="/js/jquery.z-pager.js" type="text/javascript"></script>
</head>
<body>
<div th:replace="/common/navbar :: navbar(2)"></div>
<!--主div的start-->
<div class="local_con">
    <!--左边start-->
    <div class="local_con_left" style="padding-bottom: 30px;">
        <!--顶部搜索Start-->
        <div class="local_con_left_sousuo">
            <ul>
                <!--  <li class="change_local_con_left_sousuo_li">全部</li> -->
                <li class="unchange_local_con_left_sousuo_li">全部</li>
                <li class="unchange_local_con_left_sousuo_li">文化</li>
                <li class="unchange_local_con_left_sousuo_li">特别策划</li>
                <li class="unchange_local_con_left_sousuo_li">美食</li>
                <li class="unchange_local_con_left_sousuo_li">节庆</li>
                <li class="unchange_local_con_left_sousuo_li">登山</li>
                <li class="unchange_local_con_left_sousuo_li">星旅游</li>
                <li class="unchange_local_con_left_sousuo_li">滑雪</li>
                <li class="unchange_local_con_left_sousuo_li">摄影</li>
                <li class="unchange_local_con_left_sousuo_li">建筑</li>
                <li class="unchange_local_con_left_sousuo_li">家庭</li>
                <li class="unchange_local_con_left_sousuo_li">自驾</li>
                <li class="unchange_local_con_left_sousuo_li">户外</li>
                <li class="unchange_local_con_left_sousuo_li">必备</li>
                <li class="unchange_local_con_left_sousuo_li">购物</li>
                <li class="unchange_local_con_left_sousuo_li">周边</li>
                <li class="unchange_local_con_left_sousuo_li">数据报告</li>
                <li class="unchange_local_con_left_sousuo_li">旅行主义</li>
                <li class="unchange_local_con_left_sousuo_li">观赏</li>
                <li class="unchange_local_con_left_sousuo_li">休闲</li>
            </ul>
            <span><label>更多</label></span>
        </div>
        <!--顶部搜索END-->
<form action="/insertPlace" method="post" enctype="multipart/form-data">
    <div class="file-btn">
        选择图片
    <input class="files" type="file" id="file" name="files" multiple="multiple" value="上传" placeholder="上传图片">
    </div>
    <img th:src="${place?.getImage()}" class="img-file" id="img">

    <img/>
    <input type="text" placeholder="目的地" th:value="${place?.getPlace()}" name="place" class="file-place">
    <textarea class="intrude" name="intrude" cols="30" rows="5" th:text="${place?.getIntruduce()}" placeholder="输入简介"></textarea>
    <input type="text" th:value="${place?.getId()}" name="tid" style="display: none;overflow: hidden" >
    <div><input type="submit" value="提交" class="submit">
    </div>
</form>
<!--主div的end-->
<div th:replace="/common/ending :: end"></div>



        <script>

            $(function () {
                // 图片预览
                $('#file').change(function () {
                    var reader = new FileReader();
                    reader.readAsDataURL(this.files[0]);
                    reader.onload = function () {
                        $('#img').prop('src',reader.result);
                    }

                })

                //访问sessionStorage中是否存在select_sousuo值，没有则设第一个li的样式变为橙色。有则设置对应的
                let select_sousuo=sessionStorage.getItem("select_sousuo");
                if(select_sousuo==null){
                    $(".local_con_left_sousuo>ul>li").removeClass("change_local_con_left_sousuo_li");//先移除全部
                    $(".local_con_left_sousuo>ul>li").eq(0).addClass("change_local_con_left_sousuo_li").removeClass("unchange_local_con_left_sousuo_li");
                }else{
                    $(".local_con_left_sousuo>ul>li").eq(select_sousuo).addClass("change_local_con_left_sousuo_li").removeClass("unchange_local_con_left_sousuo_li");
                }

                $(".local_con_left_content>div").mouseover(function () {
                    $(this).children("div").children("div").eq(0).css("color", "orange");
                    $(this).addClass("changelocal_con_left_content");
                }).mouseout(function () {
                    $(this).children("div").children("div").eq(0).css("color", "#333");
                    $(this).removeClass("changelocal_con_left_content");
                })

                $(".local_con_left_sousuo>ul>li").eq(4).nextAll().hide();
                $(".local_con_left_sousuo>ul>li").click(function () {
                    //1.添加样式
                    $(this).addClass("change_local_con_left_sousuo_li").removeClass("unchange_local_con_left_sousuo_li")
                        .siblings().addClass("unchange_local_con_left_sousuo_li").removeClass("change_local_con_left_sousuo_li");
                    //2.往sessionStorage中设置值
                    let index=$(".local_con_left_sousuo>ul>li").index(this);
                    sessionStorage.setItem("select_sousuo",index);

                    //获取选中的值
                    window.location.href="/getStrategyAll?currentPage="+1+"&classify="+$(this).text();
                });

                $(".local_con_left_sousuo>span>label").click(function () {
                    if ($(this).text() == "更多") {
                        $(this).text("收起");
                        $(".local_con_left_sousuo>ul>li").eq(4).nextAll().show();
                    } else {
                        $(this).text("更多");
                        $(".local_con_left_sousuo>ul>li").eq(4).nextAll().hide();
                    }
                });
            })
        </script>
</body>
</html>
